<template>
	<view>
		<view class="writebox" style="align-items: center;">
			<view class="titlebox">收货人</view>
			<input v-model="form.shouhuoren" class="inputbox" placeholder="请填写收货人姓名"
				placeholder-style="color:#C7C7C7;font-size: 28rpx;" />
		</view>
		<view class="writebox" style="align-items: center;">
			<view class="titlebox">手机号码</view>
			<input type="number" v-model="form.mobile" class="inputbox" placeholder="请填写收货人手机号"
				placeholder-style="color:#C7C7C7;font-size: 28rpx;" />
		</view>
		<view class="writebox" style="align-items: center;">
			<view class="titlebox">所在地区</view>
			<addresspicker class="selectbox" @change="hangleaddress">
				<view class="addbox">
					<view class="addtext">
						<view v-if="form.area.length > 0">
							{{ form.area[0] }} {{ form.area[1] }} {{ form.area[2] }}
						</view>
					</view>
					<view class="imgbox">
						<image src="../../static/xz.png"></image>
					</view>
				</view>
			</addresspicker>
		</view>
		<!-- <view class="writebox" style="height: 260rpx;">
				<view class="texttit">详细地址</view>
				<textarea v-model="form.street" class="textareabox" maxlength="100" placeholder="请输入详细地址"
					placeholder-style="color:#C7C7C7;font-size: 28rpx;"></textarea>
		</view> -->
		<view class="textbox">
			<view style="width: 20%;line-height: 28rpx;">详细地址</view>
			<view style="width: 80%;" >
				<textarea v-model="form.street" style="width: 100%;" maxlength="100" placeholder="请输入详细地址"
					placeholder-style="color:#C7C7C7;font-size: 28rpx;"></textarea>
			</view>
			
		</view>
		<view class="writebox" style="align-items: center;margin-top: 20rpx;">
			<view class="titlebox">默认地址</view>
			<view style="width: 70%;"></view>
			<switch @change="isDefaultChange" :checked="form.default == 1" color="#F94D29" style="transform:scale(0.7)" />
		</view>
		<view class="navbut" @click="submit">
			确定
		</view>
	</view>
</template>

<script>
import addresspicker from '../../uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue'
export default {
	components: {
		addresspicker
	},
	data() {
		return {
			form: {
				area: [],
				street: '',
				shouhuoren: '',
				mobile: '',
				default: 0
			}
		}
	},
	onLoad({id}) {
		if (id) {
			this.getaddress(id)
			this.form.id = id
		}
	},
	methods: {
		getaddress(id){
			this.$http({
				url:'api/Wechat/address_detail',
				data:{
					id:id
				}
			}).then(res=>{
				this.form = res.data
				this.form.area = [res.data.province,res.data.city,res.data.town]
				this.form.default = res.data.isdefault == 1 ? true : false
			})
		},
		hangleaddress(e) {
			this.form.area = []
			this.form.area = e.data
		},
		isDefaultChange(e) {
			this.form.default = e.detail.value ? 1 : 0
		},
		async submit() {
			let form = this.form
			if (!form.shouhuoren) {
				uni.showToast({
					title: '请填写收货人姓名',
					icon: 'none'
				})
				return
			}
			if (!form.mobile) {
				uni.showToast({
					title: '请填写收货人手机号',
					icon: 'none'
				})
				return
			}
			if (!form.area.length) {
				uni.showToast({
					title: '请选择所在地区',
					icon: 'none'
				})
				return
			}
			if (!form.street) {
				uni.showToast({
					title: '请填写详细地址',
					icon: 'none'
				})
				return
			}
			uni.showLoading({
				title: '提交中'
			})
			try {
				await this.$http({
					url: 'api/Wechat/addAddress',
					data:this.form
				})
				uni.hideLoading()
				uni.showToast({
					title: this.form.id ? '编辑成功': '添加成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			} catch (err) {

			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.textbox{
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 4rpx auto 0 auto;
		padding: 40rpx 30rpx;
		display: flex;
		font-size: 28rpx;
		font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
		font-weight: normal;
		color: #555555;
		display: flex;
	}
.writebox {
	width: 630rpx;
	height: 108rpx;
	background: #FFFFFF;
	border-radius: 14rpx;
	margin: 4rpx auto 0 auto;
	padding: 0 30rpx;
	display: flex;

	.titlebox {
		width: 20%;
		font-size: 28rpx;
		font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
		font-weight: normal;
		color: #555555;
		height: 108rpx;
		line-height: 108rpx;
	}
	.texttit{
		width: 20%;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		height: 190rpx;
		padding: 40rpx 0;
	}

	.textareabox {
		width: 80%;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		height: 190rpx;
		padding: 40rpx 0;
	}

	.inputbox {
		width: 80%;
		height: 108rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}

	.selectbox {
		width: 80%;
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;

		.addbox {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.addtext {
				width: 450rpx;
			}

			.imgbox {
				width: 60rpx;

				image {
					width: 40rpx;
					height: 12rpx;
				}
			}
		}

	}
}

.navbut {
	width: 690rpx;
	height: 84rpx;
	background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
	border-radius: 83rpx;
	left: 50%;
	transform: translate(-50%, 0);
	position: fixed;
	bottom: 70rpx;
	font-size: 32rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	line-height: 84rpx;
}</style>
